<template lang="pug">
  ModuleWrapper(title="畜牧产品质量监测检疫" flex="1")
    .chart-wrap(ref="chart")
</template>

<script>
export default {
  name: "ModulePopulation",
  data() {
    return {
      chart: null,
      data: [
        {
          label: '总人口',
          value: 0,
        },
        {
          label: '农业人口',
          value: 0,
        },
        {
          label: '新型职业农民',
          value: 0,
        },
        {
          label: '产业工人',
          value: 0,
        },
      ]
    }
  },
  methods: {
    renderChart() {
      this.chart = this.$echarts.init(this.$refs['chart']);
      this.chart.setOption({
        color: ['#1860d0', '#45c761', '#1bd8bb', '#8ad10c', ],
		legend: {
		  data: ['肉食检疫生猪胴体检疫（万头）', '牛胴体检疫（万头）','白条禽检疫（万只）'],
		  textStyle: {
		    color: '#FFF',
		  }
		},
        xAxis: {
          type: 'category',
          data: ['2016', '2017', '2018', '2019', '2020'],
          splitLine: false
        },
        yAxis: {
          type: 'value',
          splitLine: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        series: [
          {
            name: "肉食检疫生猪胴体检疫（万头）",
            data: [26.7357, 28.5634, 22.9148, 46.1951, 12.1328],
            type: 'line',
            smooth: true,
			label:{
				show:true,
				position:"top",
				textStyle:{
					color:"#fff"
				}
			}
          },
          {
            name: "牛胴体检疫（万头）",
            data: [0.2067, 0.2236, 0.2314, 0.2635, 0.2387],
            type: 'line',
            smooth: true,
			label:{
				show:true,
				position:"top",
				textStyle:{
					color:"#fff"
				}
			}
          },
		  {
		    name: "白条禽检疫（万只）",
		    data: [25.8547, 34.6785, 42.1586, 71.2632, 75.4499],
		    type: 'line',
		    smooth: true,
			label:{
				show:true,
				position:"top",
				textStyle:{
					color:"#fff"
				}
			}
		  }
        ]
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.renderChart();
    });
  }
}
</script>

<style lang="scss" scoped>
.module{
  width: 98%;
  height: rem(100);
  display: flex;
  margin: 0px auto;
  background-color: rgba($color: #ffff, $alpha: 0.15);
  .chart-wrap{
    flex: 1;
  }
}
</style>
